<template>
  <!-- 提现操作 -->
  <div class="withdraw-container">
    <div class="balance-info elevation-2">
      <div class="title">Balance</div>
      <div class="numbers">$: {{ withdraw.balance}}</div>
    </div>
    <div class="bank-info elevation-2" @click="onSelectBank">
      <span>Please select bank account</span>
      <div class="account">
        <span class="title">Account: </span>
        <span> {{ selectedBank.cardNumber }}</span>
      </div>
      <div class="bank">
        <span class="title">Bank: </span>
        <span> {{ selectedBank.text }}</span>
      </div>
    </div>

    <div class="withdraw-actions elevation-2">
      <div class="title">Please enter withdrawal amounts.</div>
      <div class="input">
        <cube-input v-model="withdraw.amount" type="number">
          <i slot="prepend" class="fa fa-cash"></i>
        </cube-input>
      </div>
      <div class="button">
        <cube-button primary @click="onConfirmClicked">Confirm</cube-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProfitIncome } from "@/api/bean";
import Cookie from "js-cookie";
import { Api, Login } from "@/api";

declare const $Vue: Vue;

@Component
export default class Withdraw extends Vue {
  private amounts: number = 0;

  private withdraw: any = {
    account: "",
    bank: "",
    balance: 0,
    amount: 0,
    payType: 1
  };

  private picker: any = null;

  private cardList: Array<any> = [];

  private selectedBank: any = {};

  private onConfirmClicked() {
    if (this.withdraw.amount === "") {
      return this.$createToast({
        txt: "Please enter amount",
        type: "warn",
        time: 3000
      }).show();
    }

    if (this.withdraw.amount > this.withdraw.balance) {
      return this.$createToast({
        txt: "Amount is larger than your balance",
        type: "warn",
        time: 3000
      }).show();
    }
    this.submitWithdraw();
  }

  protected mounted() {
    $Vue.$emit("title", {
      message: "Withdraw"
    });
    this.getCreditCardList();
    this.getUserInfo();
  }

  private onSelectBank() {
    let pickerData = this.cardList.slice();
    if (pickerData.length === 0) {
      return this.$createToast({
        txt: "Please add a credit card first",
        type: "warn",
        time: 3000
      }).show();
    }

    if (this.picker === null) {
      this.picker = this.$createPicker({
        title: "Choose Bank",
        data: [pickerData],
        onSelect: this.selectHandle,
        onCancel: this.cancelHandle,
        cancelTxt: 'Cancel',
        confirmTxt: 'Confirm',
      });
    }
    this.picker.show();
  }

  private selectHandle(value: any) {
    this.cardList.forEach((item: any) => {
      if (item.value === value[0]) {
        this.selectedBank = item;
      }
    });
    
    // let selected = this.cardList[value - 1];
    // this.selectedBank = selected;
    
  }

  private cancelHandle() {}

  /**
   * 提交提现申请
   */
  private async submitWithdraw() {
    const params: ProfitIncome = {
      incomeType: 2, // 1 充值 2 提现
      userId: Number(Cookie.get("buyer_userId")),
      amount: this.withdraw.amount,
      payType: this.selectedBank.value,
      paymentNo: this.selectedBank.text,
      currency: 'USD',
    };

    const { data } = await Api.saveProfitIncome.r(params);
    console.log("submitWithdraw", data);
    this.$createToast({
      txt: data.message,
      type: "correct",
      time: 3000
    }).show();
    this.$router.go(-1);
    if (data.result === 0) {
      //
    } else {
    }
  }

  /**
   * 获取用户余额详情
   */
  private async getUserInfo() {
    const params: any = {
      userId: Cookie.get("buyer_userId")
    };
    const { data } = await Login.getUserBalance.r();
    console.log("getSingleUserInfo", data);
    if (data.result === 0) {
      this.withdraw.balance = Number(data.data);
    } else {
    }
  }

  /**
   * 获取银行卡列表
   */
  private async getCreditCardList() {
    const params: any = {
      userId: Cookie.get("buyer_userId"),
      limit: 1000,
      offset: 0,
    };
    const { data } = await Api.getCreditCardList.r(params);
    console.log("getCreditCardList", data);
    if (data.result === 0) {
      // this.cardList = data.data.dataList;
      let list: any = [];
      data.data.dataList.forEach((item: any) => {
        list.push({
          text: item.bankName,
          value: item.bankId,
          cardNumber: item.cardNumber,
          cardMobilePhone: item.cardMobilePhone,
          cardId: item.cardId,
        });
      });
      this.cardList = list;

    } else {
      this.$createToast({
        txt: "Something has gone wrong.",
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="less" scoped>
@import url(../../../../styles/variables.less);

.withdraw-container {
  width: 100%;
  height: 100%;
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  > div {
    margin-top: 1rem;
    border-radius: 0.4rem;
  }
  .account {
    margin-top: 0.8rem;
  }
  .balance-info {
    height: 5rem;
    padding: 0.8rem 1.6rem;
    .title {
      font-size: 1.2rem;
      text-align: left;
      margin-bottom: 1rem;
    }
    .numbers {
      text-align: left;
      font-size: 2rem;
      margin-bottom: 1rem;
    }
  }
  .bank-info {
    height: 5rem;
    padding: 0.8rem 1.6rem;
    > div {
      font-size: 1.2rem;
      text-align: left;
      margin-bottom: 1rem;
    }
  }

  .withdraw-actions {
    padding: 0.8rem 1.6rem;
    > div {
      margin-bottom: 1rem;
    }
  }
  .title {
    color: @title-color;
  }
}
</style>
